<!-- 拖拽上传组件 -->
<template>
  <el-upload
    class="upload-demo"
    drag
    action="none"
    multiple
    :on-remove="upload.removeFile"
    :on-change="upload.addFile"
    :auto-upload="false"
    :file-list="upload.fileList"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
      将文件拖到此处，或<em>点击选择文件</em>
    </div>
  </el-upload>
</template>

<script setup>
import { reactive, defineProps, defineEmits, watch, watchEffect } from "vue"
const emit = defineEmits(["update:fileList"])
const props = defineProps({
    fileList: {
        type: Array,
        default: () => [],
    },
})
const upload = reactive({
    fileList: props.fileList,
    addFile(e) {
        upload.fileList.push(e)
    },
    removeFile(e) {
        var index = upload.fileList.indexOf(e)
        upload.fileList.splice(index, 1)
    },
})
watch(
    () => upload.fileList,
    () => {
        emit("update:fileList", upload.fileList)
    },
    {
        deep: true,
    }
)
</script>

<style lang="scss" scoped></style>
>
